<template>
  <h1>我是App组件</h1>
  <h2>一个人的信息</h2>
  <h3>姓名：{{name}}</h3>
  <h3>年龄：{{age}}</h3>
  <h4>工作类型: {{job.type}}</h4>
  <h4>工作岗位：{{job.position}}</h4>
  <button @click="changeInfo">修改人的信息</button>
  <br/>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    // 数据
    // let name = '张三'
    // let age = 18
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type: '打工人',
      position: '工程师'
    })
    // 方法
    function changeInfo() {
      // name = '李四'
      // age = 20
      // RefImpl：reference 引用 implement 实现  引用实现的实例 引用对象
      name.value = '李四'
      age.value = 20
      job.value.type = '管理者'
      console.log(name, age, job.value)
    }
    // 返回一个对象（常用）
    return {
      name, age, changeInfo, job
    }
  }
}
</script>